<template>
  <div class="pie" id="BarCircle"></div>
</template>

<script>
import * as echarts from 'echarts';
import json from './theme';

export default {
  name: 'BarCircle',
  props: {
    data: {
      type: Array,
      default: () => {
        return [

        ];
      }
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val.length) {
          this.init();
        }
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('BarCircle');
        echarts.registerTheme('dark', json);

        const myChart = echarts.init(chartDom, 'dark');

        const max = Math.max(...this.data.map(e => Number(e.sum)));
        const min = Math.min(...this.data.map(e => Number(e.sum)));
        const total = this.data.reduce((acc, cur) => {
          return Number(acc) + Number(cur.sum);
        }, 0);

        const data = (this.data.map((e, i) => {
          return [i + 1, Number(e.sum)];
        })).concat([[this.data.length + 1, max + 0.110110]]);

        const dataSort = data.map(e => e[1]);
        dataSort.sort((a, b) => a - b);
        console.log(this.data, 'this.data');
        // console.log(min - (total / data.length), 'min - (total / data.length)');
        const Min = min - Math.floor(total / data.length / 2);
        const option = {
          xAxis: {
            axisLabel: {
              show: false
            }
            // splitNumber: 6
          },
          yAxis: {
            min: Min - min <= 0 ? 0 : Min,
            max: max + Math.floor(total / data.length / 2),
            // min: min - Math.floor((min - (total / data.length)) / 4),
            // max: max + Math.floor((min - (total / data.length)) / 4),
            splitNumber: 3,
            axisLabel: {
              show: false
            }
            // interval: min - (total / data.length)
            // min: min - (total / data.length)
          },
          grid: {
            top: '10%',
            right: '0'
          },
          series: [
            {
              symbolSize: (value, params) => {
                const size = [60, 70, 80, 85, 90];
                const index = dataSort.findIndex(e => e == value[1]);
                // console.log(value, index);
                // console.log(value, params);
                return value[1] == max + 0.110110 ? [0, 0] : [size[index] || 90, size[index] || 90];
              },
              colorBy: data,
              data: data,
              type: 'scatter',
              symbolOffset: ['-20%', '0%'],
              itemStyle: {
                opacity: 1
              },
              label: {
                show: true,
                offset: [0, 2],
                color: '#fff',
                verticalAlign: 'middle',
                formatter: (e) => {
                  const index = e.dataIndex;
                  console.log(index, e.data[1]);
                  return (this.data[index] && e.data[1] != max + 0.110110) ? `{a|${e.data[1]}}\n{b|${this.data[index].source}}` : '';
                },
                rich: {
                  a: {
                    fontSize: 18,
                    align: 'center',
                    lineHeight: 30
                  },
                  b: {
                    fontSize: 10,
                    align: 'center'
                  }
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
      });
    }
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
    margin-top: -20px;
  }
</style>
